<template>
  <Breadcrumb>
    <span class="btn search" @click="search">查询</span>
    <span class="btn reset" @click="reset">重置</span>
    <span class="btn add" @click="add">新增</span>
  </Breadcrumb>
  <SearchForm :model="data.queryParams">
    <el-form-item label="设备名称">
      <el-input v-model="data.queryParams.deviceName" clearable />
    </el-form-item>
    <el-form-item label="设备编码">
      <el-input v-model="data.queryParams.device_mark" clearable />
    </el-form-item>
    <el-form-item label="设备型号">
      <el-input v-model="data.queryParams.model" clearable />
    </el-form-item>
    <el-form-item label="设备状态">
      <el-select v-model="data.queryParams.status" clearable>
        <el-option v-for="item in DeviceStatus" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="应用系统">
      <el-select v-model="data.queryParams.system_id" clearable @change="systemChange">
        <el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="设备类型">
      <el-select v-model="data.queryParams.deviceType" clearable>
        <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
      </el-select>
    </el-form-item>
  </SearchForm>
  <SimpleTable ref="simpleTable" :_configs="configs" :_data="data.dataList" :_total="data.total" @_load="loadData">
    <template #opt>
      <el-table-column v-slot="{ row }" prop="opt" label="操作" width="100">
        <span class="link edit" @click="edit(row)">编辑</span>
      </el-table-column>
    </template>
  </SimpleTable>
  <SimpleDialog v-model="form.dialogShow">
    <template #header><span>设备注册</span></template>
    <template #default>
      <el-form
          label-position="right"
          label-width="100px"
          :model="form.formParams"
      >
        <el-form-item label="设备名称">
          <el-input v-model="form.formParams.name" />
        </el-form-item>
        <el-form-item label="应用系统">
          <el-select v-model="form.formParams.systemId" clearable>
            <el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-input v-model="form.formParams.deviceType" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <span class="btn cancel" @click="cancel">取消</span>
      <span class="btn confirm" @click="confirm">确认</span>
    </template>
  </SimpleDialog>
</template>

<script lang="ts" setup>
import Breadcrumb from 'components/back/common/Breadcrumb.vue'
import SearchForm from 'components/back/SearchForm/Index.vue'
import SimpleTable from 'components/back/SimpleTable/Index.vue'
import SimpleDialog from 'components/back/SimpleDialog/Index.vue'
import { DeviceStatus } from "@/api/Device"

const { proxy }: any = getCurrentInstance()

const simpleTable = ref()

const data = reactive({
  queryParams: {
    sorted: 0,
    deviceName: undefined,
    device_mark: undefined,
    system_id: undefined,
    deviceType: undefined,
    model: undefined,
    status: undefined,
    region_id: undefined
  },
  total: 0,
  dataList: [],

})

const form = reactive({
  dialogShow: false,
  formParams: {
    name: undefined,
    systemId: undefined,
    deviceType: undefined
  }
})

const configs = [
  {
    prop: 'deviceName',
    label: '设备名称'
  },
  {
    prop: 'device_mark',
    label: '设备编码'
  },
  {
    prop: 'deviceTypeName',
    label: '设备类型'
  },
  {
    prop: 'region',
    label: '所属区域'
  },
  {
    prop: 'model',
    label: '设备型号'
  },
  {
    prop: 'factory',
    label: '生产厂商',
    formatter: (row: any, value: any) => {
      return '中谷芯123'
    }
  },
  {
    prop: 'deviceStatusName',
    label: '设备状态'
  },
  {
    prop: 'systemName',
    label: '应用系统'
  }
]

let systemList: [{id: number | any, name: string | any}] | any = []

let deviceTypeList: [{id: number | any, typeName: string | any}] | any = ref([])

const initSystemList = () => {
  proxy.$API.querySystemList().then((res: any) => {
    systemList = res || []
  })
}

const systemChange = (systemId: number) => {
  data.queryParams.deviceType = undefined
  proxy.$API.queryDeviceTypeList(systemId).then((res: any) => {
    deviceTypeList.value = res || []
  })
}

const search = () => {
  simpleTable.value._init()
}

const reset = () => {
  data.queryParams.deviceName = undefined
  data.queryParams.device_mark = undefined
  data.queryParams.system_id = undefined
  data.queryParams.deviceType = undefined
  data.queryParams.model = undefined
  data.queryParams.status = undefined
  data.queryParams.region_id = undefined
}

const add = () => {
  form.dialogShow = true
}

const edit = (row: any) => {
  console.log({ row })
}

const cancel = () => {
  form.dialogShow = false
  // TODO
}

const confirm = () => {
  // TODO
}

const loadData = (pageNum: number, pageSize: number) => {
  proxy.$API.deviceApi.queryDeviceList({ ...data.queryParams, pageNum, pageSize }).then((res: any) => {
    data.dataList = res.deviceList ?? []
    data.total = res.total ?? 0
  })
}

onMounted(() => {
  initSystemList()
})
</script>

<style scoped>

</style>
